<template>
  <component :is="cfg.model" v-model:window_open="val.md_set" title="快速设置">
    <template #content>
      <div class="_box0 _mbbox">
        <div class="_box2 _gap1" v-for="(item, key) in val.qsetdata.list">
          <div class="_gap1_1">{{ val.lang[key] }} Lv.{{ set.jsc(item) }}</div>
          <div class="_gap1_2">
            <div v-for="(item2, key2) in item">
              {{ val.lang2[key2] }}
              <n-input-number v-model:value="val.qsetdata.list[key][key2]" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.saveqset">保存设置</n-button>
    </template>
  </component>
  <n-config-provider :theme="$diycssbase['darkTheme']">
    <div class="_mbbox boxgap nbox1">
      <div class="gap pd2 g12 bg5">
        <div>
          需要消耗精通点数：<span style="color: rgb(68, 223, 15)"
            >{{ parseInt(val.mpx - val.newdata.info.save_point) }} </span
          >，根据你的守护者基地精通分数需要<span style="color: rgb(68, 223, 15)"
            >（<template v-if="val.mypt == null">填写基地分</template
            ><template v-else>
              {{
                (
                  parseInt(val.mpx - val.newdata.info.save_point) /
                  (val.mypt * 24)
                ).toFixed(2)
              }}</template
            >）</span
          >天 <br />[ 导入配方 ] 可保存或读取升级数据<br />
          [ 快速设置 ] 可快速设置到指定等级
        </div>
        <div>
          <n-input
            v-model:value="val.mypt"
            placeholder="输入你的守护者基地分计算要多少天"
          ></n-input>
        </div>
        <div class="flex g8">
          <n-button @click="set.remode()">导入配方</n-button>
          <n-button @click="set.qset">快速设置</n-button>
          <n-button @click="set.remode()">重置等级</n-button>
          <n-button @click="set.savepoint()">清零消耗</n-button>
        </div>
      </div>

      <div class="ngap bg5">
        <div class="ngap2">
          <div class="_lbox_div">
            <div
              class="_lbox"
              :class="`${key == val.ckk ? '_lboxck' : ''}`"
              v-for="(item, key) in val.newdata?.list"
              @click="val.handl(key)"
            >
              <img :src="`${set.img[val.lang[key]]}`" class="_box_zyimg" />

              <div>
                <p>{{ val.lang[key] }}</p>
                <p style="color: #858e9c">
                  {{ set.jsc(item) }}/{{ val.newdata.info.maxlv }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="_rbox_div">
          <div class="_rbox" v-for="(item, key) in val.newdata?.list[val.ckk]">
            <div class="rbox1">
              <div>
                <div class="_title">{{ val.lang2[key] }} Lv.{{ item }}</div>
                <div class="_t2text" style="color: #d1d5ee">
                  {{ val.lang[val.ckk] }}{{ val.lang2[key] }}{{ item.name }}提升{{
                    set.sscut(key, item)
                  }}%<span style="color: #44df0f">(+{{ set.ssadd(key, item) }}%)</span>
                </div>
              </div>
              <div>
                <div>
                  <div class="_rbox2">
                    <img style="width: 30px" src="./img/ficon.jpg" />
                    <div style="padding-right: 10px; font-size: 1.1em">
                      {{ set.jsgs(item) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="_btn_box">
              <div class="_btn" @click="set.up(val.ckk, key)">升级</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </n-config-provider>
</template>
<style scoped>
._box_zyimg {
  filter: contrast(0.4);
  width: 30px;
}
.ngap {
  gap: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.ngap2 {
  padding: 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  width: 150px;
  justify-content: center;
  align-items: center;
}
._btnm {
  background-color: #ffcf11;
  padding: 8px;
  font-size: 1em;
  color: #000;
  border-radius: 8px;
  box-shadow: 0 0 3px #000;
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  /* 禁止选择文本 */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

._lbox:hover {
  background-color: #2cadf7;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

._lbox:hover img {
  filter: invert(1);
}

._lboxck img {
  filter: invert(1);
}

._lboxck {
  background-color: #2cadf7 !important;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

._lboxck p {
  color: #fff !important;
  text-shadow: 0 0 3px #000;
}

._lbox:hover p {
  color: #fff !important;
  text-shadow: 0 0 3px #000;
}

.rbox1 {
  padding: 8px;
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  border-left: solid 5px #a76cff;
  border-radius: 5px;
}

._btn_box {
  background-color: #2d384c;
  width: 150px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

._rbox2 {
  background-color: #202633;
  padding: 5px;
  width: 150px;
  margin-right: 10px;
  border-radius: 20px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._btn {
  background-color: #ffcf11;
  padding: 8px;
  font-size: 1.2em;
  color: #000;
  border-radius: 8px;
  box-shadow: 0 0 3px #000;
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  /* 禁止选择文本 */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

._lbox_div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
  flex-wrap: nowrap;
}

._title {
  font-size: 1.1em;
  padding-bottom: 7px;
  text-shadow: 0 0 3px #000;
  display: flex;
  align-items: center;
  gap: 8px;
}

._lbox {
  background-color: #28303e;
  border-radius: 8px;
  gap: 20px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  /* 禁止选择文本 */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

.btngap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  justify-content: center;
  gap: 3vw;
  justify-items: stretch;
  align-items: center;
}

._rbox_div {
  padding: 8px;
  border-radius: 8px;
  flex: 1;
  gap: 8px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

._rbox {
  background-color: #28303e;
  display: flex;
  justify-content: space-between;
  min-width: 600px;
}

._lbox p {
  font-size: 1.2em;
  margin: 0;
}

._gap1_1 {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

._gap1_2 {
  grid-column: span 6;
}

@media (max-width: 428px) {
  .mstmain {
    padding: 1.75vw;
    border-radius: 10px;
  }
  .nbox1 div {
    font-size: var(--def-15px);
  }
  .ngap2 {
    padding: 1vw;
    width: 18vw;
  }
  .ngap {
    gap: 1vw;
  }
  ._box_zyimg {
    width: 4.5vw;
  }
  ._lbox div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  ._lbox p {
    font-size: 3vw;
  }
  ._lbox {
    gap: 1vw;
    padding: 0;
    height: 15vw;
    padding-top: 4vw;
    padding-bottom: 4vw;
  }
  ._rbox_div {
    padding: 1.5vw;
    border-radius: 1.5vw;
    gap: 1.5vw;
  }
  ._title img {
    width: 5vw !important;
  }
  ._title {
    font-size: 3vw;
    padding-bottom: 1.5vw;
    gap: 1.5vw;
  }
  ._rbox {
    min-width: 62vw;
  }
  .rbox1 {
    padding: 2vw;
    border-left: solid 0.75vw #a76cff;
  }

  ._t2text {
    font-size: 2.5vw !important;
  }
  ._rbox2 {
    padding: 0px;
    width: 20vw;
    margin-right: 0px;
    border-radius: 20px;
  }
  ._rbox2 img {
    width: 6vw !important;
  }
  ._rbox2 div {
    padding-left: 1vw !important;
    padding-right: 1.5vw !important;
    font-size: 3vw !important;
  }
  ._btn_box {
    width: 13vw;
  }
  ._btn {
    background-color: #ffcf11;
    padding: 0px;
    font-size: 3vw;
    width: 8vw;
    font-size: 3.25vw !important;
    height: 8vw;
  }
}
</style>
<script>
import zs from "./img/zs.png";
import zs_hover from "./img/zs_hover.png";
import ss from "./img/ss.png";
import ss_hover from "./img/ss_hover.png";
import tk from "./img/tk.png";
import tk_hover from "./img/tk_hover.png";
import fz from "./img/fz.png";
import fz_hover from "./img/fz_hover.png";
import atk from "./img/atk.jpg";
import def from "./img/def.jpg";
import hp from "./img/hp.jpg";
import sk from "./img/sk.jpg";
import { cfg } from "@/cfg/cfg.js";
import { forEach, set } from "lodash";
export default defineComponent({
  setup() {
    let set = {
      //保存快速设置
      saveqset: () => {
        const d = val.qsetdata;
        const d2 = d.list;
        let maxlv = 0;
        for (let index = 0; index < d2.length; index++) {
          const item = d2[index];
          const ml = set.jsc(item);
          const mc = Math.ceil(ml);
          alert(mc);
        }
      },
      //快速设置按钮
      qset: () => {
        //浅拷贝
        val.qsetdata = cfg.copy(val.newdata);
        val.md_set = true;
      },
      //保存消耗点
      savepoint: () => {
        val.newdata.info.save_point = val.mpx;
        return;
      },
      //消耗点数
      points_cost: () => {
        const l = val.newdata.list;
        let sum = 0;
        for (let i = 0; i < l.length; i++) {
          const item = l[i];
          for (let j = 0; j < item.length; j++) {
            const item2 = item[j];
            if (item2 >= 1) {
              let totalCost = 0;
              for (let lv = 1; lv <= item2; lv++) {
                totalCost += set.jsgs(lv - 1);
              }
              sum += totalCost;
            }
          }
        }
        val.mpx = sum;
        return sum;
      },
      up: (ckkey, key) => {
        const l = val.newdata.list;
        const info = val.newdata.info;
        const d = l[ckkey];
        let sum = 0;
        for (let j = 0; j < d.length; j++) {
          const item2 = d[j];
          sum += item2;
        }
        if (sum >= info.maxlv) {
          cfg.alert3({
            title: "等级超过上限",
            message: `请将所有职业等级提升到${info.maxlv}级，或使用快速设置功能一键提升等级。`,
            closeOnClickOverlay: true,
          });
          return false;
        }
        d[key]++;
        //检测l数组总数是否相同
        let pdmax = 0;
        for (let i = 0; i < l.length; i++) {
          const item = l[i];
          const sum = item.reduce((total, num) => total + num, 0);
          if (sum == info.maxlv) {
            pdmax++;
          }
        }
        if (pdmax >= 4) {
          info.maxlv += 10;
        }
        set.points_cost();
        return;
      },
      sscut: (key, lv) => {
        if (lv <= 1) return val.int1[key].toFixed(1); // 1级直接返回

        const int1 = val.int1[key];
        const int2 = val.int2[key];

        // 计算完整的10级周期数
        const fullCycles = Math.floor((lv - 1) / 10);
        // 计算剩余的级数
        const remainingLevels = (lv - 1) % 10;

        // 计算基础总和
        let total = int1 * lv;

        // 计算完整周期的额外总和
        total += int2 * fullCycles;

        // 保留一位小数
        return total.toFixed(1);
      },
      ssadd: (key, lv) => {
        if (lv >= 10) {
          const pd = lv % 10;
          if (pd == 0) {
            return val.int2?.[key] + val.int1?.[key] ?? 0;
          } else {
            return val.int1?.[key] ?? 0;
          }
        } else {
          return val.int1?.[key] ?? 0;
        }
      },
      //获取数组的总和
      jsc: (arr) => {
        let sum = 0;
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i];
        }
        return sum;
      },
      jsgs: (lv) => {
        lv = lv + 1;
        if (lv <= 1) return 80000; // 1级直接返回80000

        const fullCycles = Math.floor((lv - 1) / 10); // 完整的10级周期数
        const remainingLevels = (lv - 1) % 10; // 剩余不足10级的级数

        // 计算基础费用
        let totalCost = 80000;

        // 计算完整10级周期的费用
        if (fullCycles > 0) {
          // 基础费用部分：每级增加4000，共10级
          const baseCost = 4000 * 10 * fullCycles;
          // 额外费用部分：每10级增加40000
          const extraCost = 40000 * fullCycles;

          totalCost += baseCost + extraCost;
        }

        // 计算剩余级数的费用
        if (remainingLevels > 0) {
          // 当前级的增量：基础增量 + 每周期增加的增量
          const currentBaseIncrement = 4000 + 4000 * fullCycles;
          totalCost += currentBaseIncrement * remainingLevels;

          // 如果剩余级数跨越了新的10级周期，加上额外费用
          if (remainingLevels === 0 && fullCycles > 0) {
            totalCost += 40000 * fullCycles;
          }
        }

        return totalCost;
      },

      loaddata: async (id) => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "tool/gt_mastery",
            t3: "load_ip",
            id: id,
          },
        });
        if (res.data.code == 0) {
          val.cache = res.data.data;
          //obj数组字符串转int
          for (let key in val.cache) {
            forEach(val.cache[key], (item, key2) => {
              val.cache[key][key2] = parseInt(item);
            });
          }
          localStorage.setItem("mastery_cache", JSON.stringify(val.cache));
          location.reload();
        } else {
          cfg.msg.error(res.data.msg);
        }
      },

      level: () => {
        let lv = 0;
        val.data.forEach((item) => {
          lv += item.level;
        });
        return lv;
      },

      img: {
        战士: zs,
        射手: ss,
        坦克: tk,
        辅助: fz,
        战士_hover: zs_hover,
        射手_hover: ss_hover,
        坦克_hover: tk_hover,
        辅助_hover: fz_hover,
        攻击: atk,
        防御: def,
        生命: hp,
        技伤: sk,
      },
      zkey: {
        战士: 0,
        射手: 1,
        坦克: 2,
        辅助: 3,
      },
      def: [
        {
          name: "攻击",
          val: 0.1,
          by: 0.0,
          level: 0,
        },
        {
          name: "生命",
          val: 0.1,
          by: 0.0,
          level: 0,
        },
        {
          name: "防御",
          val: 0.1,
          by: 0.0,
          level: 0,
        },
        {
          name: "技伤",
          val: 0.2,
          by: 0.0,
          level: 0,
        },
      ],
      remode: () => {
        localStorage.setItem("mastery_cache", JSON.stringify({}));
        //重载页面
        location.reload();
      },
    };
    let val = reactive({
      md_set: false,
      mpx: parseInt(0),
      handl: (key) => {
        val.ckk = key;
      },
      ckd: [],
      ckh: [],
      cache: {},
      lang: ["战士", "射手", "坦克", "辅助"],
      lang2: ["攻击", "生命", "防御", "技伤"],
      int1: [0.1, 0.1, 0.1, 0.2],
      int2: [1.0, 1.0, 1.0, 2.0],
      newdata: {
        info: {
          maxlv: 10,
          save_point: 0,
        },
        list: [
          [0, 0, 0, 0],
          [0, 0, 0, 0],
          [0, 0, 0, 0],
          [0, 0, 0, 0],
        ],
      },
    });

    onMounted(() => {
      return;
      //读取浏览器缓存
      if (
        localStorage.getItem("mastery_cache") == "undefined" ||
        localStorage.getItem("mastery_cache") == undefined
      ) {
      } else {
        if (localStorage.getItem("mastery_cache") != null) {
          val.cache = JSON.parse(localStorage.getItem("mastery_cache"));
          for (let key in val.cache) {
            const k = set.zkey[key];
            val.cache[key].forEach((item, key) => {
              const data = val.data[k].list[key];
              val.data[k].level += item;
              data.level = item;
              data.by = (data.val * data.level).toFixed(1);

              val.mpx =
                parseInt(val.mpx) +
                parseInt((data.level / 2) * (2 * val.pt + (data.level - 1) * val.adpt));
            });
          }

          //一直for循环 最多9999次
          for (let i = 0; i < 999; i++) {
            let count = 0;
            val.data.forEach((item) => {
              if (item.level >= item.maxlevel) {
                count++;
              }
            });
            if (count >= 4) {
              //循环10次
              val.data.forEach((item) => {
                item.maxlevel += 10;
              });
            } else {
              //停止循环
              break;
            }
            count = 0;
          }
        }
      }
    });

    return {
      val,
      cfg,
      set,
    };
  },
});
</script>
